<template>
  <div class="linkage">
    <el-select
      v-model="province"
      placeholder="省级地区"
      @change="choseProvince"
    >
      <el-option
        v-for="item in provinces"
        :key="item.id"
        :label="item.value"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="city"
      placeholder="市级地区"
      @change="choseCity"
    >
      <el-option
        v-for="item in cities"
        :key="item.id"
        :label="item.value"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="area"
      placeholder="区级地区"
      @change="choseArea"
    >
      <el-option
        v-for="item in areas"
        :key="item.id"
        :label="item.value"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'DistPicker',
  data() {
    return {
      provinces: [],
      province: '',
      city: '',
      cities: [],
      area: '',
      areas: []
    }
  },
  created: function() {
    this.getCityData()
  },
  methods: {
    // 加载china地点数据，三级
    getCityData: function() {
      var that = this
      axios.get('map.json').then(function(response) {
        if (response.status === 200) {
          var data = response.data
          that.provinces = []
          that.cities = []
          that.areas = []
          // 省市区数据分类
          for (var item in data) {
            if (item.match(/0000$/)) { // 省
              that.provinces.push({ id: item, value: data[item], children: [] })
            } else if (item.match(/00$/)) { // 市
              that.cities.push({ id: item, value: data[item], children: [] })
            } else { // 区
              that.areas.push({ id: item, value: data[item] })
            }
          }
          // 分类市级
          for (var index in that.provinces) {
            for (var index1 in that.cities) {
              if (that.provinces[index].id.slice(0, 2) === that.cities[index1].id.slice(0, 2)) {
                that.provinces[index].children.push(that.cities[index1])
              }
            }
          }
          // 分类区级
          for (var city in that.cities) {
            for (var area in that.areas) {
              if (that.areas[area].id.slice(0, 4) === that.cities[city].id.slice(0, 4)) {
                that.cities[city].children.push(that.areas[area])
              }
            }
          }
        } else {
          console.log(response.status)
        }
      }).catch(function(error) { console.log(typeof +error) })
    },
    // 选省
    choseProvince: function(e) {
      for (var index in this.provinces) {
        if (e === this.provinces[index].id) {
          this.cities = this.provinces[index].children
          this.city = this.provinces[index].children[0].value
          this.areas = this.provinces[index].children[0].children
          this.area = this.provinces[index].children[0].children[0].value
        }
      }
    },
    // 选市
    choseCity: function(e) {
      for (var index in this.city) {
        if (e === this.city[index].id) {
          this.areas = this.city[index].children
          this.area = this.city[index].children[0].value
          // console.log(this.E)
        }
      }
    },
    // 选区
    choseArea: function(e) {
      this.area = e
      // console.log(this.E)
    }
  }
}
</script>

<style scoped>

</style>
